<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="../dist/js/cascade-gallery.js"></script>
    <title>Cascade gallery</title>
</head>
<style>
    @import url('https://fonts.googleapis.com/css?family=Courgette&display=swap');
    @import url('https://fonts.googleapis.com/css?family=Hind+Siliguri&display=swap');
    .page-title{
        font-family: 'Courgette', cursive;
        font-size: 54px;
        text-align: center;
        padding: 45px 0 25px 0px;
        color: #d14992;
    }
    .page-description {
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 14px;
        background: rgba(255,255,255,.14);
        border-bottom: 1px solid rgba(0,0,0,.11);
        -webkit-box-shadow: 0px 7px 5px 0px rgba(0,0,0,0.05);
        -moz-box-shadow: 0px 7px 5px 0px rgba(0,0,0,0.05);
        box-shadow: 0px 7px 5px 0px rgba(0,0,0,0.05);
        margin-bottom: 55px;
        padding: 0px 25px 25px 25px;
        text-align: center;
    }
    .test-title-class {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 38px;
        background: rgba(0,0,0,.45);
        border-bottom: 1px solid rgba(0,0,0,.7);
        color: white;
        padding: 10px;
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 18px;
        text-align: center;
        line-height: 20px;
    }
    .test-description-class {
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 100%;
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 14px;
        line-height: 18px;
        background: rgba(255,255,255,.7);
        overflow: hidden;
        border-top: 3px solid rgba(0,0,0,.7);
        padding: 0px;
        max-height: 0;
        -webkit-transition: all .55s linear;
        -moz-transition: all .55s linear;
        -o-transition: all .55s linear;
        transition: all .55s linear;
    }
    .cgl-image-wrapper:hover .test-description-class {
        max-height: 100%;
    }
    .test-big-button-class{
        display: block;
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 24px;
        background: rgba(223,234,240,1);
        background: -moz-linear-gradient(top, rgba(223,234,240,1) 0%, rgba(192,208,219,1) 50%, rgba(139,178,201,1) 51%, rgba(224,239,249,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(223,234,240,1)), color-stop(50%, rgba(192,208,219,1)), color-stop(51%, rgba(139,178,201,1)), color-stop(100%, rgba(224,239,249,1)));
        background: -webkit-linear-gradient(top, rgba(223,234,240,1) 0%, rgba(192,208,219,1) 50%, rgba(139,178,201,1) 51%, rgba(224,239,249,1) 100%);
        background: -o-linear-gradient(top, rgba(223,234,240,1) 0%, rgba(192,208,219,1) 50%, rgba(139,178,201,1) 51%, rgba(224,239,249,1) 100%);
        background: -ms-linear-gradient(top, rgba(223,234,240,1) 0%, rgba(192,208,219,1) 50%, rgba(139,178,201,1) 51%, rgba(224,239,249,1) 100%);
        background: linear-gradient(to bottom, rgba(223,234,240,1) 0%, rgba(192,208,219,1) 50%, rgba(139,178,201,1) 51%, rgba(224,239,249,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfeaf0', endColorstr='#e0eff9', GradientType=0 );
        border: 1px solid rgba(0,0,0,.03);
        height: 50px;
        width: 300px;
        color: #ffffff;
        font-weight: bold;
        margin: 0 auto;
        text-shadow: 0 -1px 1px rgba(0,0,0,.8);
        cursor: pointer;
        outline: none;
    }
    .test-link-class{
        font-family: 'Hind Siliguri', sans-serif;
        background: rgba(0,0,0,.45);
        border-radius: 3px;
        color: #ffffff;
        font-weight: bold;
        margin: 0 auto;
        text-shadow: 0 -1px 1px rgba(0,0,0,.8);
        cursor: pointer;
        text-decoration: none;
        padding: 0px 10px;
    }
    .test-link-class:hover {
        background: rgba(0,0,0,.75);
    }
</style>
<body style="background: url('https://ibmachine.com/assets/frontend/img/background-header.png') repeat; margin: 0; padding: 0;">
<div id="app">
    <div style="width: 1200px; margin: 0 auto;">
        <div class="page-title">
            Cascade Gallery
        </div>
        <div class="page-description">
            VueJs image gallery which randomizes image sizes in the given ranges on each load.
            <hr color="#ccc" size="1px">
            <div style="line-height: 0; text-align: center">
                <img src="https://img.shields.io/badge/dynamic/json.svg?url=https://raw.githubusercontent.com/userforce/cascade-gallery/master/package.json&label=name&query=$.name&color=blue">
                <img src="https://img.shields.io/badge/dynamic/json.svg?url=https://raw.githubusercontent.com/userforce/cascade-gallery/master/package.json&label=version&query=$.version&color=blue" />
                <img src="https://img.shields.io/badge/dynamic/json.svg?url=https://raw.githubusercontent.com/userforce/cascade-gallery/master/package.json&label=license&query=$.license&color=lightgrey" />
                <img src="https://img.shields.io/badge/build-passing-green" />
                <img src="https://david-dm.org/userforce/cascade-gallery.svg" />
                <img src="https://img.shields.io/npm/dt/cascade-gallery" />
            </div>
            <hr color="#ccc" size="1px">
            <div style="color: #777;">
                Modal carousel
                &nbsp;&nbsp;-|-&nbsp;&nbsp;
                Random sizes in the given range
                &nbsp;&nbsp;-|-&nbsp;&nbsp;
                Touch support
                &nbsp;&nbsp;-|-&nbsp;&nbsp;
                Custom content
                &nbsp;&nbsp;-|-&nbsp;&nbsp;
                Animation
            </div>
        </div>
        <cascade-gallery :images="images"
                         :config="config"
                         v-slot:default="image">
            <div class="test-title-class">
                <!-- Use [your-default.index] property to get access to the each image configuration -->
                {{ images[image.index].data['my-custom-2'] | cutLongText(20) }}
            </div>
            <div class="test-description-class">
                <div style="padding: 10px;">
                    {{ images[image.index].data['my-custom-1'] | cutLongText(95)  }}
                    <br/><br/>
                    <a class="test-link-class" :href="images[image.index].src[0]">Open</a>
                    <span class="test-link-class">Read</span>
                    <span class="test-link-class">Link</span>
                </div>
            </div>
        </cascade-gallery>
        <br/><br/>
        <hr color="#ccc" size="1px">
        <br/><br/>
        <button class="test-big-button-class" @click="addImages()">Show more</button>
        <br/><br/>
    </div>
</div>
<script type="text/javascript">    new Vue({
        el: '#app',
        components: {
            'cascade-gallery': CascadeGallery
        },
        data() {
            /**
             * The list of the images used for the gallery
             */
            let images = [];
            for(let iterator = 0; iterator <= 25; iterator++) {
                images.push(this.generateRandomImageConfig());
            }

            return {
                images: images,
                config: {

                    'width-range': {
                        min: 250,
                        max: 400
                    },

                    'height-range': {
                        min: 200,
                        max: 350
                    },

                    /**
                     * Gap in between a columns in pixels
                     */
                    'gap': 10,

                    /**
                     * The delay between images appearance
                     */
                    'appending-delay': 50,
                }
            };
        },
        methods: {
            addImages() {
                let amount = this.getRandomNumber(3, 25);
                for(let iterator = 1; iterator <= amount; iterator++) {
                    this.images.push(this.generateRandomImageConfig());
                }
            },
            generateRandomImageConfig() {
                return {

                    /**
                     * Images list
                     */
                    'src': this.getImages(),

                    /**
                     * Data used in the slot
                     */
                    'data': {
                        'my-custom-1': this.getDescriptionText(),
                        'my-custom-2': this.getTitleText(),
                        'my-custom-3' : '#'
                    }
                };
            },

            /**
             * Generates a random list of images
             */
            getImages() {
                let images = [];
                for(let iterator = 1; iterator <= 10; iterator++) {
                    let width = this.getRandomNumber(700, 800);
                    let height = this.getRandomNumber(500, 700);
                    let url = 'http://placekitten.com/'+width+'/'+height;
                    images.push(url);
                }
                return images;
            },

            getTitleText() {
                return 'Excepteur sint occaecat';
            },

            getDescriptionText() {
                return'Lorem donec massa sapien faucibus et molestie ac feugiat. Ac ' +
                      'turpis egestas integer eget aliquet nibh praesent tristique. ' +
                      'Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna.';

            },

            getRandomNumber(min = 0, max = 500) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min)) + min;
            }
        },
        filters: {
            cutLongText: function (text, maxLength) {
                if (text.length > maxLength) {
                    return (text.slice(0, maxLength))+'...';
                }
                return text;
            }
        }
    });
</script>
</body>
</html>